<script setup>
import {ref,reactive} from "vue"
import btnModule from "../../components/index/btnModule.vue"
import aipCheckbox from "../../components/index/aip-checkbox.vue"
import { httpRequest } from '../../utils/http';
import { onUnload } from "@dcloudio/uni-app";
const dateStart = ref('') //日期picker的开始日期
const date = ref('') // 日期picker绑定的value
const dateEnd = ref('') // picker的结束日期
const list = reactive([]) // 全部数组
const dateList = ref([]) // 只包含日期的数组
const timeStart = ref('') // picker的开始时间
const time = ref('') // 绑定到picker的value
const activeName = ref('') // 活动名称

// 获取当前时间的 时分秒时间戳 总和
const getCurrentTimestamp = () => {
  const date = new Date();
  const hours = date.getHours();
  const minutes = date.getMinutes();
  const seconds = date.getSeconds();
  const timestamp = hours * 3600 + minutes * 60 + seconds;
  return timestamp;
}
// 定义任务名为 活动名 + 时间戳
activeName.value = "矩阵分发活动"+getCurrentTimestamp()

// 添加日期方法
const dateChange = (e) => {
    // 如果没有该日期则添加进数组
    if(!dateList.value.includes(e.detail.value)){
        dateList.value.push(e.detail.value)
        list.push({date:e.detail.value,time:[]})
    }else{
        uni.showToast({title:'已经有该日期了',icon:'none'})
    }
}

// 添加时间方法 
const timeChange = (e) => {
    console.log(e);
    if(!list[index.value].time.includes(e.detail.value)){
        list[index.value].time.push(e.detail.value)
    }else{
        uni.showToast({title:'已经有该时间了',icon:'none'})
    }
}

// 获取当前日期
const getDate = () => {
    let currentDate = new Date();
    // 获取年、月、日信息
    let year = currentDate.getFullYear();
    let month = currentDate.getMonth() + 1; // 月份是从0开始计数的，需要加1
    let day = currentDate.getDate();
    // 将年、月、日信息格式化为YYYY-MM-DD格式
    dateStart.value = year + '-' + (month < 10 ? '0' + month : month) + '-' + (day < 10 ? '0' + day : day);
    
}

// 获取开始时间方法
const getTimeStart = () => {
    let currentTime = new Date();
    currentTime.setMinutes(currentTime.getMinutes() + 180);
    // 获取小时和分钟信息
    let hours = currentTime.getHours();
    let minutes = currentTime.getMinutes();
    // 将小时和分钟信息格式化为HH:MM格式
    timeStart.value = (hours < 10 ? '0' + hours : hours) + ':' + (minutes < 10 ? '0' + minutes : minutes);
}

// 获取结束日期方法 结束时间为当前日期+5
const getDate5 = () => {
    let currentDate = new Date();
    currentDate.setDate(currentDate.getDate() + 5);
    // 获取年、月、日信息
    let year = currentDate.getFullYear();
    let month = currentDate.getMonth() + 1; // 月份是从0开始计数的，需要加1
    let day = currentDate.getDate();
    // 将年、月、日信息格式化为YYYY-MM-DD格式
    dateEnd.value = year + '-' + (month < 10 ? '0' + month : month) + '-' + (day < 10 ? '0' + day : day);
}
getDate()
getDate5()
getTimeStart()
const index = ref(-1)

// 添加时间
const addTime = (i) => {
    console.log(i);
    index.value = i
}

// 删除日期
const delDate = (i) => {
    dateList.value.splice(i,1)
    list.splice(i,1)
}

// 删除时间
const delTime = (index,i) => {
    list[index].time.splice(i,1)
}

//获取任务列表
const maxNum = ref(0)
const taskList = ref([])
const getTaskList = async() => {
    const res = await httpRequest("/api/taskListByShopId", "POST", {
    shopId: uni.getStorageSync('shop')[uni.getStorageSync('index')].shopId,
  });
  console.log(res);
  taskList.value = res.data;
    taskList.value.forEach(async(e)=>{
      const res1 = await httpRequest("/api/videoListByTaskId", "POST", {
      taskId:e.id,
      });
      e.vnum = res1.data.videoNum
    })
}
getTaskList()

//选择视频素材
const taskPopup = ref()
const phonePopup = ref()
const close1 = () => {
    taskPopup.value.close()
    phonePopup.value.close()
}

// 打开选择任务弹窗
const openTask = () => {
    taskPopup.value.open('bottom')
}

// 打开选择推广账号弹窗
const openPhone = () => {
    phonePopup.value.open('bottom')
}


const chooseTaskList = ref([])
const chooseTaskListId = ref([])
// 选择任务
const taskClick = (e) => {
    // 如果该任务已选择则取消选择，否则选择该任务
    if(chooseTaskList.value.includes(e.taskName)){
       chooseTaskList.value = chooseTaskList.value.filter(item=>item!=e.taskName)
       chooseTaskListId.value = chooseTaskListId.value.filter(item=>item!=e.id)
       maxNum.value-=e.whetherWhether2
       console.log(chooseTaskList.value);
    }else{
        if(chooseTaskList.value.length>=3)return uni.showToast({title:'最多选择三个任务',icon:'none'}) 
        chooseTaskList.value.push(e.taskName)
        chooseTaskListId.value.push(e.id)
        maxNum.value+=e.whetherWhether2
    }
}

//确认发布
const vcode = ref()
const code = ref()
// 提示弹窗
const tipPopup = ref()

// 确认发布
const publish = () => {
    // 将时间数组拼接成字符串
    let timeArr = []
    list.forEach(e=>{
        e.time.forEach(item=>{
            timeArr.push(e.date + ' ' + item)
        })
    })
    // 如果选择的时间大于视频总数，则弹出提示框
    if(timeArr.length>maxNum.value)return tipPopup.value.open()
    // 对请求所需的参数进行判断
    if(!activeName.value)return uni.showToast({title:"请输入任务名称",icon:'none'})
    if(!chooseTaskList.value.length)return uni.showToast({title:"请选择视频素材",icon:'none'})
    if(!phoneId.value)return uni.showToast({title:"请选择推广账号",icon:'none'})
    if(!timeArr.length)return uni.showToast({title:"请选择发送时间",icon:'none'})
    //发送请求
    uni.showLoading({title:'发布中',mask:true})
    uni.request({
        url: 'https://www.diandianyouke.cn:8081/api/addReleTask',
        data: {
            taskName:activeName.value,
            releTimes:timeArr.join(),
            tiktokId:phoneId.value,
            createTime:new Date().getTime(),
            videoNum:maxNum.value,
            videoTaskNames:chooseTaskList.value.join(),
            videoTaskIds:chooseTaskListId.value.join(),
            start:1,
            shopId:uni.getStorageSync('shop')[uni.getStorageSync('index')].shopId
        },
        timeout:300000,
        header: {
            Accept: 'application/json',
            'Content-Type': 'application/json',
        },
        method: 'POST',
        success: ({ data }) => {
            if(data.success){
                // 发布成功
                uni.showToast({title:'发布成功',icon:'success'})
                clearInterval(timer.value)
                clearInterval(timer2.value)
            }else{
                // 发布失败
                clearInterval(timer.value)
                clearInterval(timer2.value)
                uni.showToast({title:'发布失败',icon:'error'})
            }
        },
        fail: (error) => {
            console.log(error);
        }
    })

    timer.value = setInterval(async()=>{
                const res = await httpRequest('/api/getLoginType','POST',{
                    phone:phone.value,
                    name:'creVideoCode'
                })
                if(res.data){
                    codeName.value = res.data
                    clearInterval(timer.value)
                    uni.hideLoading()
                    uni.showToast({title:'验证码已发送',icon:'success'})
                    vcode.value.open()
                }
            },2000)
}

// 提示框我知道了
const codeName = ref('') // 发送验证码需要的值
const timer = ref()
const iKnow = () => {
    tipPopup.value.close()
    if(!activeName.value)return uni.showToast({title:"请输入任务名称",icon:'none'})
    if(!chooseTaskList.value.length)return uni.showToast({title:"请选择视频素材",icon:'none'})
    if(!phoneId.value)return uni.showToast({title:"请选择推广账号",icon:'none'})
    console.log(list);
    let timeArr = []
    list.forEach(e=>{
        e.time.forEach(item=>{
            timeArr.push(e.date + ' ' + item)
        })
    })
    console.log(timeArr.join());
    if(!timeArr.length)return uni.showToast({title:"请选择发送时间",icon:'none'})
    //发送请求
    uni.showLoading({title:'发布中',mask:true})
    uni.request({
        url: 'https://www.diandianyouke.cn:8081/api/addReleTask',
        data: {
            taskName:activeName.value,
            releTimes:timeArr.join(),
            tiktokId:phoneId.value,
            createTime:new Date().getTime(),
            videoNum:maxNum.value,
            videoTaskNames:chooseTaskList.value.join(),
            videoTaskIds:chooseTaskListId.value.join(),
            start:1,
            shopId:uni.getStorageSync('shop')[uni.getStorageSync('index')].shopId
        },
        header: {
            Accept: 'application/json',
            'Content-Type': 'application/json',
        },
        method: 'POST',
        success: ({ data, statusCode, header }) => {
            if(data.success){
                // 发布成功
                uni.showToast({title:'发布成功',icon:'success'})
                clearInterval(timer.value)
                clearInterval(timer2.value)
            }else{
                // 发布失败
                clearInterval(timer.value)
                clearInterval(timer2.value)
                uni.showToast({title:'发布失败',icon:'error'})
            }
        },
        fail: (error) => {
            console.log(error);
        }
    })

    timer.value = setInterval(async()=>{
                const res = await httpRequest('/api/getLoginType','POST',{
                    phone:phone.value,
                    name:'creVideoCode'
                })
                if(res.data){
                    codeName.value = res.data
                    clearInterval(timer.value)
                    uni.hideLoading()
                    uni.showToast({title:'验证码已发送',icon:'success'})
                    vcode.value.open()
                }
            },2000)
}

// 选择任务和达人号弹窗确认
const into = () => {
    taskPopup.value.close()
    phonePopup.value.close()
}

//获取全部手机号
const phoneList = ref([])
const phoneCode = ref('')
const getPhoneList = async() => {
    const res = await httpRequest('/api/releTiktokList','POST',{
        businessId:uni.getStorageSync('business').businessId
    })
    console.log(res.data);
    phoneList.value = res.data
}
getPhoneList()

const phoneId = ref('')
const phone = ref('')
const phoneClick = (e) => {
    phoneId.value = e.id
    phone.value = e.tiktokPhone
}

//输入验证码发送给后端
const timer2 = ref()
const timeErr = ref()
const start = ref(0)
const vcodeClick = async() => {
    uni.showLoading({
        title: '加载中',
        mask: true
    })
        httpRequest('/api/addReleTiktokCode','POST',{
        phone:phone.value,
        code:phoneCode.value,
        name:codeName.value
    })
    //开启定时器请求是否会有二次验证
    // timer2.value = setInterval(async() => {
    //    const res = await httpRequest('/api/creVideoCode','POST',{
    //     phone:phone.value,
    //    })
    //    if(res.data){
    //     clearInterval(timer2.value)
    //     uni.hideLoading()
    //     codeName.value = res.data
    //     uni.showToast({title:'验证码已发送',icon:'success'})
    //     vcode.value.open()
    //    }
    // }, 3000);
    // 两分钟后关闭定时器
    setTimeout(() => {
        uni.hideLoading()
        clearInterval(timer2.value)
        uni.showToast({title:'发布成功',icon:'success'})
    }, 120000);
    if(start.value!=2){
        timeErr.value = setInterval(async()=>{
            if(start.value == 1){
                const res = await httpRequest('/api/getLoginType','POST',{
                    phone:phone.value,
                    name:'creVideoCodeError1'
                })
                if(res.data){
                    start.value = 2
                    clearInterval(timeErr.value)
                    uni.hideLoading()
                    uni.showToast({title:'验证码输入错误',icon:'none'})
                    phoneCode.value = res.data
                }
            }else{
                const res = await httpRequest('/api/getLoginType','POST',{
                    phone:phone.value,
                    name:'creVideoCodeError'
                })
                if(res.data){
                    start.value = 1
                    clearInterval(timeErr.value)
                    uni.hideLoading()
                    uni.showToast({title:'验证码输入错误',icon:'none'})
                    phoneCode.value = res.data
                }
            }
            
        },2000)
    }
    
    }


// 退出页面后清除定时器
onUnload(()=>{
    clearInterval(timer.value)
    clearInterval(timer2.value)
})
</script>

<template>
    <view class="page">
        <view class="bgi"></view>
        <view class="box">
            <view class="from">
            <view class="from-item">
                <text>活动名称</text>
                <input style="text-align: right;font-size: 28rpx;color: rgb(69,70,74);" v-model="activeName" type="text">
            </view>
            <view class="from-item">
                <text>视频素材</text>
                <view @click="openTask" style="display: flex;align-items: center;font-size: 28rpx;color: rgb(142,84,244);">
                    {{chooseTaskList.length?'已选择':'去选择'}}
                    <image style="width: 48rpx;height: 48rpx;" src='https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/icon_yjtouz.png'/>
                </view>
            </view>
            <view class="from-item">
                <text>推广账号</text>
                <view @click="openPhone" style="display: flex;align-items: center;font-size: 28rpx;color: rgb(142,84,244);">
                    {{phoneId?"已选择":"去选择"}}
                    <image style="width: 48rpx;height: 48rpx;" src='https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/icon_yjtouz.png'/>
                </view>
            </view>
        </view>
        <view style="padding-bottom: 220rpx;">
            <view class="from">
                <view class="time" :style="dateList.length?'':'border:none'">
                    <view class="item">
                        <text>发布时间</text>
                        <picker mode="date" :value="date" :start="dateStart" :end="dateEnd" @change="dateChange">
			    			<view style="font-size: 32rpx;color: rgb(142,84,244);">添加日期</view>
			    		</picker>
                    </view>
                </view>
                <view class="time-li" v-for="item,index in list" :key="index">
                    <view class="item-middle">
                        <text>{{ item.date }}</text>
                        <view style="display: flex;align-items: center;">
                            <button class="del" @click="delDate(index)">删除</button>
                            <picker @click="addTime(index)" mode="time" :value="time" :start="timeStart" @change="timeChange">
                                <button class="add">添加时间</button>
			    		    </picker>
                        </view>
                    </view>
                    <view class="time-bottom">
                        <view class="time-item" v-for="e,i in item.time" :key="i">{{ e }}
                        <image 
                        @click="delTime(index,i)"
                        class="xxx" 
                        src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/xxxx.png"/>
                        </view>
                    </view>
                </view>
        </view>
        </view>
        
        </view>
        <view class="num">发布视频：{{ maxNum }}条</view>
        <btnModule message="确认发布" @customClick="publish" />
    </view>
    <!-- 选择任务弹出框 -->
    <uni-popup ref="taskPopup" @change="popupChange">
    <view class="content">
      <view class="close">
        <image
          class="close-btn"
          @click="close1()"
          src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/list_button_Close.png"
          mode=""
        />
        选择视频素材
      </view>
      <view style="overflow-y: scroll;width: 100%;height: 733rpx;">
        <view class="tips">提示：最多可选择三个剪辑任务</view>
        <view 
        v-for="item,index in taskList" 
        :key="index" 
        style="display: flex;align-items: center;justify-content: space-between;padding: 0 30rpx 0 30rpx;margin-bottom: 30rpx;" 
        @click="taskClick(item)">
            <view style="margin-right: 30rpx;">
              <aip-checkbox :key="keys" :check="chooseTaskList.includes(item.taskName)"></aip-checkbox>
            </view>
        <view class="item">
            <view>{{ item.taskName }}</view>
            <view class="name">
              <text style="margin-right: 12rpx;">未发布视频</text>
              <text class="text">{{ item.whetherWhether2 }}</text>
            </view>
      </view>
        </view>
      <view class="flxed">
        <button @click="into" class="tianjia tianjia-style">确认</button>
      </view>
      </view>
    </view>
  </uni-popup>
  <!-- 选择手机号弹出框 -->
    <uni-popup ref="phonePopup" @change="popupChange">
    <view class="content">
      <view class="close">
        <image
          class="close-btn"
          @click="close1()"
          src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/list_button_Close.png"
          mode=""
        />
        选择视频素材
      </view>
      <view style="overflow-y: scroll;width: 100%;height: 733rpx;padding-top: 30rpx;">
        <view 
        v-for="item in phoneList"
        :key="item.id"
        style="display: flex;align-items: center;justify-content: space-between;padding: 0 30rpx 0 30rpx;margin-bottom: 30rpx;" 
        @click="phoneClick(item)">
            <view style="margin-right: 30rpx;">
              <aip-checkbox :key="keys" :check="phoneId==item.id"></aip-checkbox>
            </view>
        <view class="item" >
            <view>{{item.tiktokPhone}}</view>
      </view>
        </view>
      <view class="flxed">
        <button @click="into" class="tianjia tianjia-style">确认</button>
      </view>
      </view>
    </view>
  </uni-popup>
  <!-- 视频不足提示 -->
  <uni-popup ref="tipPopup">
    <view class="tip-content">
        <view class="tip-title">视频数量不足</view>
        <text>视频素材少于执行发行的视频数量，当视频素材数量为0时，活动任务将自动停止</text>
        <button hover-class="hover" class="know" @click="iKnow">我知道了</button>
    </view>
  </uni-popup>
  <!-- 验证码弹窗 -->
  <uni-popup ref="vcode">
    <view class="vcode-content">
        <view class="vcode-title">{{codeName==1?'二次账号验证':'账号验证'}}</view>
        <input class="vcode-input" v-model="phoneCode" placeholder="输入验证码" type="text">
        <text>请输入发送至<text class="vcode-text">{{phone}}</text>的验证码</text>
        <button class="vcode-button" hover-class="hover" @click="vcodeClick">确认</button>
    </view>
  </uni-popup>
  <!-- 二维码弹窗 -->
  <!-- <uni-popup ref="qrCode">
    <view class="qr-code">
        <image style="width: 522rpx;height: 442rpx;" src=""/>
        <image class="qrcode" :src="url"/>
        <view class="qr-view">
            <view class="qr-item">
                <image style="width: 32rpx;height: 32rpx;" src=""/>
                <text>刷新</text>
            </view>
            <view class="qr-item" @click="share">
                <image style="width: 32rpx;height: 32rpx;" src=""/>
                <text>转发</text>
            </view>
            <view class="qr-item" @click="save">
                <image style="width: 32rpx;height: 32rpx;" src=""/>
                <text>保存</text>
            </view>
        </view>
    </view>
  </uni-popup> -->
</template>

<style scoped lang="scss">

.page{
    .bgi{
        width: 100%;
        height: 750rpx;
        background: linear-gradient(180deg,rgb(159,130,255) 0%,rgba(246,248,251,1)100%);
    }
    .box{
        position: absolute;
        top: 206rpx;
        left: 30rpx;
        width: 690rpx;
        height: 1130rpx;
    
    .from{
        padding: 0 36rpx;
        box-sizing: border-box;
        border-radius: 24rpx;
        background-color: #fff;
        margin-bottom: 30rpx;
        .from-item{
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            min-height: 120rpx;
            padding: 36rpx 0;
            box-sizing: border-box;
            border-bottom: 1px solid rgb(220,223,230);
            &:nth-last-child(1){
                border: none;
            }
        }
        .time{
            padding: 36rpx 0;
            box-sizing: border-box;
            border-bottom: 1px solid rgb(220,223,230);
            .item{
                display: flex;
                justify-content: space-between;
                align-items: center;
                font-size: 32rpx;
                font-weight: 500;
                color: rgb(48,49,51);
            }
            
        }
        .time-li{
            padding: 36rpx 0;
            box-sizing: border-box;
            border-bottom: 1px solid rgb(220,223,230);
            .item-middle{
                display: flex;
                align-items: center;
                justify-content: space-between;
                font-size: 30rpx;
                color: rgb(48,49,51);
                .del{
                    padding: 2rpx 18rpx;
                    box-sizing: border-box;
                    color: rgb(144,147,153);
                    border-radius: 8rpx;
                    font-size: 28rpx;
                    border: 1px solid rgb(220,223,230);
                    margin: 0;
                    margin-right: 36rpx;
                }
                .add{
                    padding: 2rpx 18rpx;
                    box-sizing: border-box;
                    color: #fff;
                    background-color: rgb(142,84,244);
                    border-radius: 8rpx;
                    font-size: 28rpx;
                    margin: 0;
                }
            }
            .time-bottom{
                margin-top: 64rpx;
                .time-item{
                    position: relative;
                    display: inline-block;
                    width: 198rpx;
                    height: 54rpx;
                    background-color: rgb(246,248,251);
                    border-radius: 8rpx;
                    text-align: center;
                    line-height: 54rpx;
                    margin-right: 12rpx;
                    margin-bottom: 24rpx;
                    &:nth-child(3n){
                        margin-right: 0;
                    }
                    .xxx{
                        width: 48rpx;
                        height: 48rpx;
                        position: absolute;
                        top: -24rpx;
                        right: -12rpx;
                    }
                }
            }
        }
        
        .day{
            padding: 36rpx 0;
            box-sizing: border-box;
            .day-text{
                font-size: 32rpx;
                color: rgb(48,49,51);
                margin-bottom: 36rpx;
            }
            .day-item{
                width: 144rpx;
                height: 68rpx;
                border-radius: 8rpx;
                background-color: rgb(246,248,251);

            }
        }
    }
    }
    .num{
        position: fixed;
        bottom: 166rpx;
        left: 0;
        width: 100%;
        height: 48rpx;
        text-align: center;
        line-height: 48rpx;
        background-color: rgba(252,139,0,0.1);
        font-size: 24rpx;
        color: rgb(252,139,0);
    }
}
.content{
  width: 100%;
  height: 1000rpx;
  border-radius: 32rpx 32rpx 0 0;
  background-color: #fff;
  .close {
    width: 100%;
    height: 108rpx;
    text-align: center;
    line-height: 108rpx;
    font-size: 32rpx;
    font-weight: 700;
    color: rgb(48, 49, 51);
    border-bottom: 1px solid rgb(220, 223, 230);
    .close-btn {
      position: absolute;
      top: 30rpx;
      left: 30rpx;
      width: 48rpx;
      height: 48rpx;
    }
    .addbtn {
      position: absolute;
      right: 30rpx;
      font-size: 28rpx;
      color: rgb(142, 84, 244);
    }
  }
  .from{
    overflow-y: hidden;
    width: 690rpx;
    height: 235rpx;
    background-color: rgb(249,249,249);
    border-radius: 16rpx;
    padding: 0 30rpx;
    // padding-bottom: 356rpx;
    margin: 30rpx;
    box-sizing: border-box;
    .name{
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 630rpx;
      height: 116rpx;
      font-size: 30rpx;
      color: rgb(69,70,74);
      border-bottom: 1px solid rgb(220, 223, 230);
      &:last-child{
        border: none;
      }
      .input{
        text-align: right;
      }
    }

  }
  .tips{
    font-size: 24rpx;
    color: rgb(252,139,0);
    margin: 30rpx;
  }
  .item{
    width: 618rpx;
    // margin: 30rpx;
    border-radius: 24rpx;
    padding: 30rpx;
    box-sizing: border-box;
    background-color: rgb(249,249,249);
    .name{
      // width: 630rpx;
      display: flex;
      font-size: 28rpx;
      color: rgb(144,147,153);
      margin-top: 18rpx;
      .text{
        color: rgb(142, 84, 244);
        font-weight: 700;
      }
    }
  }
  .flxed{
          width: 100%;
          height: 166rpx;
          position: fixed;
          bottom: 0;
          left: 0;
          background-color: #fff;
          .tianjia{
            width: 690rpx;
            height: 88rpx;
            margin: 10rpx 30rpx 0;
            font-size: 32rpx;
            text-align: center;
            line-height: 88rpx;
            background-color: rgba(241, 241, 241, 1);
            color: rgb(192,196,204);
          }
        }
}
.tianjia-style{
      background-color: rgb(142,84,244) !important;
      color: #fff !important;
    }

.tip-content{
    width: 582rpx;
    height: 356rpx;
    padding: 36rpx;
    box-sizing: border-box;
    font-size: 28rpx;
    color: rgb(69,70,74);
    border-radius: 16rpx;
    background-color: #fff;
    .tip-title{
        text-align: center;
        font-size: 34rpx;
        font-weight: 500;
        color: rgb(252,139,0);
        margin-bottom: 30rpx;
    }
    .know{
        width: 100%;
        height: 80rpx;
        text-align: center;
        line-height: 80rpx;
        color: #fff;
        background-color: rgb(142,84,244);
        border-radius: 8rpx;
        margin-top: 42rpx;
        font-size: 32rpx;

    }
}

.vcode-content{
    width: 582rpx;
    height: 420rpx;
    border-radius: 16rpx;
    background-color: #fff;
    padding: 36rpx;
    box-sizing: border-box;
    font-size: 24rpx;
    color: rgb(144,147,153);

    .vcode-title{
        text-align: center;
        font-size: 34rpx;
        color: rgb(48,49,51);
    }
    .vcode-input{
        width: 510rpx;
        height: 88rpx;
        background-color: rgb(249,249,249);
        border-radius: 8rpx;
        padding: 0 24rpx;
        box-sizing: border-box;
        margin: 30rpx 0 18rpx 0;
    }
    .vcode-text{
        font-size: 24rpx;
        font-weight: 500;
        color: rgb(142, 84, 244);
        margin-bottom: 42rpx;
    }
    .vcode-button{
        width: 510rpx;
        height: 80rpx;
        border-radius: 8rpx;
        background-color: rgb(142, 84, 244);
        color: #fff;
        font-size: 32rpx;
        text-align: center;
        line-height: 80rpx;
        margin-top: 42rpx;
    }
}

.qr-code{
        width: 582rpx;
        padding: 36rpx 30rpx;
        box-sizing: border-box;
        background-color: #fff;
        .qrcode{
            display: block;
            width: 360rpx;
            height: 360rpx;
            margin: 36rpx auto 18rpx;
        }
        .qr-view{
            display: flex;
            width: 386rpx;
            align-items: center;
            justify-content: space-between;
            margin: 0 auto;
            .qr-item{
                width: 86rpx;
                display: flex;
                align-items: center;
                justify-content: space-between;
                font-size: 24rpx;
                color: rgb(144, 147, 153);
            }
        }

    }
</style>